<!--suppress ALL -->
<template>
	<view class="container-gray exam-list-box" v-if="iconlistall.length > 0">
		<template v-if="parseInt(examType) === 1 || parseInt(examType) === 3">
			<scroll-view class="exam-scroll" scroll-x="true" v-for="(item, index) in iconlistall" :key="index" @scroll="examScroll($event, item)"
			 :scroll-left="item.scroll" scroll-with-animation="true">
				<view v-if="iconlistall.length > 0" class="exam-box">
					<view class="exam-title">
						<view>《<text style="width: 10px;word-wrap:break-word;white-space:normal; word-break:break-all;">{{item.name}}</text>》</view>
						<view class="tips">
							<view v-if="item.examStartType == 1">考试已开始</view>
							<view v-else-if="item.examStartType == 0">
								<view>距离考试开始还剩</view>
								<view class="tips-time">{{ formatDay(item.remainingTime) }}</view>
							</view>
							<view v-else>考试已结束</view>
						</view>
					</view>
					
					<view class="exam-time">考试时间：{{ item.startTime }}至{{ item.endTime }}</view>
					<view class="exam-footer">
						<view class="exam-place">
							<template v-if="item.place">
								考试地点：{{ item.place }}
							</template>
						</view>
						<button v-if="item.examStartType == 1" type="primary" class="primary enter-btn" @click="enterExam(item)">进入考试</button>
						<button v-else class="enter-btn-gray">{{ item.examStartType == 0 ? '进入考试' : '考试结束' }}</button>
					</view>
				</view>

				<view class="exam-scroll-delete" v-if="item.examStartType == 2">
					<view class="exam-delete" @click="examDelete(item.id, index)"></view>
				</view>
			</scroll-view>
		</template>

		<template v-else>
			<scroll-view class="exam-scroll" scroll-x="true" v-for="(item, index) in iconlistall" :key="index"
			 scroll-with-animation="true">
				<view class="exam-box mo-exam-box flex-box">
					<view>
						<view v-if="parseInt(examType) === 2" class="mo-time">{{ parseInt(item.duration / 60) }}分钟</view>
						<view class="mo-title">《{{ item.name }}》</view>
					</view>
					<view>
						<button v-if="parseInt(examType) === 4" type="primary" class="primary enter-btn mo-enter-btn" v-bind:class="{ 'enter-btn-dis': item.isJoin }"
						 @click="enterExam(item)">
							{{ item.isJoin ? '您已答题' : '开始答题' }}
						</button>
						<button v-else-if="item.examStartType == 1" type="primary" class="primary enter-btn mo-enter-btn" @click="enterExam(item)">开始练习</button>
						<button v-else class="enter-btn-gray">{{ item.examStartType == 0 ? '进入考试' : '考试结束' }}</button>
					</view>
				</view>
				<view class="exam-scroll-delete" v-if="item.examStartType == 2">
					<view class="exam-delete" @click="examDelete(item.id, index)"></view>
				</view>
			</scroll-view>
		</template>
	</view>
	<view class="no-data" v-else>暂无数据</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request';
	import {
		formatDay,
		setNavTitle
	} from '../../common/common';
	import uniNoticeBar from '../../components/uni-notice-bar/uni-notice-bar';
	export default {
		data() {
			return {
				timer: null,
				timer_4: null,
				examType: 0,
				examList: [],
				options: null,
				page: 1
			};
		},
		onLoad(options) {
			this.examType = options.examType;
			this.options = options;
		},
		onShow() {
			this.page = 1;
			this.examList = [];
			this.getExamList();
		},
		onHide() {
			if (this.timer != null) clearInterval(this.timer);
			if (this.timer_4 != null) clearInterval(this.timer_4);
		},
		onReady() {
			if (this.options.examType) {
				switch (parseInt(this.options.examType)) {
					case 1:
						setNavTitle('正式考试');
						break;
					case 2:
						setNavTitle('模拟考试');
						break;
					case 3:
						setNavTitle('三违考试');
						break;
					default:
						setNavTitle('每日一题');
						break;
				}
			}
		},
		onBackPress() {
			if (this.options.banner) {
				uni.switchTab({
					url: '/pages/main/main'
				});
			} else {
				uni.switchTab({
					url: '../exam/exam'
				});
			}
			return true
		},
		onNavigationBarButtonTap() {
			if (this.options.banner) {
				uni.switchTab({
					url: '/pages/main/main'
				});
			} else {
				uni.switchTab({
					url: '../exam/exam'
				});
			}
		},
		onReachBottom() {
			this.page++;
			this.getExamList();
		},
		computed: {
			//这里是监听自定义数组的变化 因为有一个计时器每秒都会减去数组中字段的时间 所以 数组是每秒更新的
			iconlistall: {
				get() {
					return this.examList;
				}
			}
		},
		onPageScroll() {
			this.iconlistall.forEach(x => {
				x.scroll = 0;
			});
			this.$forceUpdate();
		},
		components: {
			uniNoticeBar
		},
		methods: {
			examScroll(e, item) {
				if (e.detail.scrollLeft > 20) {
					this.iconlistall.forEach(x => {
						if (x.id == item.id) {
							x.scroll = 80;
						} else {
							x.scroll = 0;
						}
					});
				} else {
					item.scroll = 0;
				}
				this.$forceUpdate();
			},
			examDelete(id, index) {
				post_md5('/exam-app/exam/del', {
					userId: uni.getStorageSync('userId'),
					examId: id
				}).then(res => {
					uni.showToast({
						title: '已删除'
					});
					this.examList.splice(index, 1);
				});
			},
			formatDay,
			getExamList() {
				if (parseInt(this.examType) === 4) {
					post_md5('/exam-app/daily/answer/list', {
						userId: uni.getStorageSync('userId')
					}).then(res => {
						let data = res.data || [];
						if (data.length > 0) {
							this.examList = data;
							this.examList.forEach(x => {
								if (x.examStartType == 0) {
									this.timer_4 = setInterval(() => {
										if (x.remainingTime === 0) {
											clearInterval(this.timer_4);
											x.examStartType = 1;
										} else {
											x.remainingTime--;
										}
									}, 1e3);
								}
							});
						} else {
							this.examList = [];
						}
					});
				} else {
					post_md5('/exam-app/exam/examlist', {
						userId: uni.getStorageSync('userId'),
						type: this.examType,
						page: this.page
					}).then(res => {
						let data = (res.data && res.data.list) || [];
						if (data.length > 0) {
							this.examList = this.examList.concat(data);
							this.examList.forEach(x => {
								if (x.examStartType == 0) {
									this.timer = setInterval(() => {
										if (x.remainingTime === 0) {
											clearInterval(this.timer);
											x.examStartType = 1;
										} else {
											x.remainingTime--;
										}
									}, 1e3);
								}
								x.scroll = 0;
							});
						} else {
							this.page--;
						}
					});
				}
			},

			enterExam(item, length) {
				if (item.isJoin) {
					return false;
				}
				if (parseInt(this.examType) === 4) {
					post_md5('/exam-app/daily/answer/record', {
						dailyId: item.id,
						userId: uni.getStorageSync('userId')
					}).then(res => {
						if (res.data > 0) {
							uni.showToast({
								title: '今日已完成，请明日再来',
								icon: 'none'
							});
						} else {
							uni.navigateTo({
								url: '../topic/daily-topic' + `?examType=4&id=${item.id}`
							});
						}
					});
				} else {
					// if (parseInt(this.examType) !== 2) {
					post_md5(
						'/exam-app/exam/iscanbeexam', {
							examId: item.id,
							userId: uni.getStorageSync('userId')
						},
						true
					).then(res => {

						if (res.code == 500) {
							return false;
						}
						uni.setStorageSync('examIndex', 0);
						if (this.examType === 2) {
							uni.setStorageSync('quesList', this.quesList);
						} else {
							uni.setStorageSync('quesList', [{}]);
						}
						this.quesList = res.data.quesList
						this.examDuration = res.data.examDuration
						this.examId = res.data.examId
						
						this.$store.commit('setQuestionList', this.quesList);
						uni.navigateTo({
							url: '../topic/exam-topic' + `?id=${this.examId}&examType=${this.examType}&duration=${this.examDuration}`
						});
					});
				}
			}
		}
	};
</script>

<style scoped>
	.enter-btn-dis {
		border-color: #e2e8ec !important;
		background: #e2e8ec !important;
		color: #999 !important;
	}

	.exam-list-box {
		padding: 20upx 20upx 0;
		box-sizing: border-box;
	}

	.exam-scroll {
		display: block;
		width: 100%;
		white-space: nowrap;
		margin-bottom: 20upx;
		overflow: hidden;
	}

	.exam-scroll-delete {
		vertical-align: top;
		position: relative;
		top: 0;
		left: 0;
		display: inline-block;
		width: 150upx;
		height: 260upx;
	}

	.exam-delete {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 100upx;
		height: 100upx;
		background: url(../../static/icon/mistake.png) no-repeat center/cover;
		border-radius: 50%;
	}

	.exam-box {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 100%;
		height: 280upx;
		padding: 20upx;
		background: #ffffff;
		border: 1px solid #ededed;
		border-radius: 10px;
		color: #333333;
	}

	.mo-exam-box {
		display: flex;
		padding: 20upx;
		height: 200upx;
	}

	.mo-title {
		padding: 30upx 10upx 50upx 0;
		font-weight: bold;
		word-wrap: break-word;
		white-space: normal;
		word-break: break-all;
	}

	.mo-time {
		padding-left: 33upx;
		background: url(../../static/icon/time.png) no-repeat left center;
		background-size: 24upx;
		font-size: 24upx;
	}

	.exam-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		font-size: 32upx;
		margin-bottom: 20upx;
	}

	.exam-title-name {
		margin: 20upx 0 0;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.exam-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.exam-time {
		padding-left: 20upx;
		font-size: 22upx;
		line-height: 40upx;
	}

	.exam-place {
		flex: 1;
		padding-left: 20upx;
		font-size: 22upx;
		line-height: 40upx;
	}

	.tips {
		width: 230upx;
		margin-right: 10upx;
		text-align: right;
		font-size: 22upx;
		font-weight: 400;
		color: #999999;
	}

	.tips-time {
		color: #02a8f4;
		font-weight: 500;
	}

	.enter-btn {
		width: 200upx;
		line-height: 60upx;
		border-radius: 30upx;
		font-size: 28upx;
		font-weight: 400;
		color: #ffffff;
		border: none;
	}

	.mo-enter-btn {
		background: #fff;
		color: #02a8f4;
		border: 1px solid #02a8f4;
	}

	.enter-btn-gray {
		width: 200upx;
		line-height: 60upx;
		border-radius: 30upx;
		font-size: 28upx;
		font-weight: 400;
		color: #ffffff;
		border: none;
		background: #cccccc;
	}
</style>
